<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 100%"
      tooltip-effect="dark"
      border
      :height="$store.state.app.tableHeight"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="产品代码">
              <span>{{ props.row.shop }}</span>
            </el-form-item>
            <el-form-item label="产品名称">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="品牌">
              <span>{{ props.row.shopId }}</span>
            </el-form-item>
            <el-form-item label="规格">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="批号">
              <span>{{ props.row.shop }}</span>
            </el-form-item>
            <el-form-item label="生产日期">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="单位">
              <span>{{ props.row.shopId }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        label="类别"
        prop="id"
      />
      <el-table-column
        label="出库单号"
        prop="id"
      />
      <el-table-column
        label="出库时间"
        prop="name"
      />
      <el-table-column
        label="客户类别/客户编号"
        prop="desc"
      />
      <el-table-column
        label="客户名称"
        prop="desc"
      />
      <el-table-column
        label="总数量"
        prop="desc"
      />
      <el-table-column
        label="大条码数"
        prop="desc"
      />
      <el-table-column
        label="中条码数"
        prop="desc"
      />
      <el-table-column
        label="小条码数"
        prop="desc"
      />
      <el-table-column
        label="备注"
        prop="desc"
      />
      <el-table-column
        label="上传账号"
        prop="desc"
      />
      <el-table-column
        label="录入时间"
        prop="desc"
      />
      <el-table-column
        label="确认账号"
        prop="desc"
      />
      <el-table-column
        label="确认时间"
        prop="desc"
      />
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: 'wac',
          shop: 'jdkjj',
          id: '012',
          shopId: '123',
          category: '淡淡的',
          address: '天津',
          desc: 'desc'
        },
        {
          name: 'liyx',
          shop: 'dddd',
          id: '013',
          shopId: '143',
          category: '芭芭拉',
          address: '北京',
          desc: '额额额额'
        }
      ]
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.$emit('selectedVal', val)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
